<template>
	<view class="container">
		<custom-header title="我的"></custom-header>
		<view class="layout">
			<!-- 登录 -->
			<button class="header share-btn" @click="handleLogin" v-if="!isLogin">
				<!-- <button open-type="getPhoneNumber" class="header share-btn" @getphonenumber="handleLogin" v-if="!isLogin"> -->
				<view class="left">
					<view class="username">立即登录</view>
				</view>
				<view class="right">
					<image class="avatar" src="/images/default_avatar.png"></image>
				</view>
			</button>
			<view class="header" v-else>
				<view class="left">
					<view class="username" @click="goSetting">{{userInfo.nickname}}</view>
					<view class="invitation" v-if="codeInfo.length === 0">
						<text>暂无可用时间</text>
					</view>
					<view class="invitation" v-else>
						<view v-for="item in codeInfo">
						<text>{{item.message}}：{{item.validUntil}}</text>
						<text v-if="item.message.indexOf('试用') < 0"> 到期</text></view>
					</view>
				</view>
				<view class="right" @click="goSetting">
					<image class="avatar" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
					<image class="avatar" src="/images/default_avatar.png" v-else></image>
				</view>
			</view>
			<view>
				
			</view>
			<!-- 登录 -->
			<view class="menu-layout">
				<button class="item share-btn" open-type="share">
					<view class="left">
						<image class="icon" src="/static/images/icon_share.png"></image>
						<view class="label">分享小程序</view>
					</view>
				</button>
				<navigator url="/pages/membership/membership">
					<view class="item">
						<view class="left">
							<image class="icon" style="width: 40rpx;height: 40rpx" src="/static/images/icon_tab_service_active.png"></image>
							<view class="label">{{configText}}</view>
						</view>
					</view>
				</navigator>
				<!-- <navigator url="/pages/extract_record/extract_record"> -->
				<view class="item" @click="goHistoryFn()">
					<view class="left">
						<image class="icon" src="/static/images/icon_history.png"></image>
						<view class="label">历史记录</view>
					</view>
				</view>
				<!-- </navigator> -->
				<!-- <navigator url="/pages/settings/account_settings"> -->
				<view class="item" @click="goSettingFn()">
					<view class="left">
						<image class="icon" src="/static/images/icon_setting.png"></image>
						<view class="label">账号设置</view>
					</view>
				</view>
				<!-- </navigator> -->
			</view>
			<view class="menu-layout" style="padding: 32rpx;">
				<view class="title">卡密兑换</view>
				<view class="file">
					<input class="input-box" v-model="vipCode" placeholder="请输入兑换码"  />
				</view>
				<view class="btn-group">
					<view @click="exchangeFn"  :class="['btn', vipCode ? 'active': '']">立即兑换</view>	
				</view>
			</view>
			<view class="service-layout">
				<view class="service-title">客服微信号</view>
				<image src="/static/images/wx_service.png" class="service-icon" :show-menu-by-longpress="true"></image>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import { ref } from 'vue';
	import { onShareAppMessage, onShareTimeline, onLoad, onShow } from '@dcloudio/uni-app';
	import { apiLogin, getUserInfo, codeRedeem, getDynamicConfig } from '@/utils/api.js';
	
	const isLogin = ref(false);
	const userInfo = ref({
		invitationCode: "10000001",
		nickname: '用户昵称',
		avatar: '/images/default_avatar.png',
		vipStatus: false,
	})
	const vipCode = ref('');
	const codeInfo = ref([]);
	const configText = ref('');
	// 登录
	const handleLogin = (e) => {
		// let { errMsg, code } = e.detail;
		// console.log(errMsg);
		// if (errMsg == 'getPhoneNumber:ok') {
			uni.login({
				onlyAuthorize: true,
				success: async (res) => {
					console.log(res);
					let param = {
						code: res.code,
						// phoneCode: code
					}
					const { success, data, message } = await apiLogin(param);
					if (success) {
						userInfo.value = data.userInfo;
						isLogin.value = true;
						uni.setStorageSync("accessToken", data.accessToken);
						uni.setStorageSync("userInfo", JSON.stringify(data.userInfo));
						getUserInfoFn();
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				}
			})
		// } else {
		// 	uni.showToast({
		// 		title: errMsg,
		// 		icon: 'none'
		// 	})
		// }
		
	}
	
	// 验证会员有效期
	const getUserInfoFn = async () => {
		const { data } = await getUserInfo({}); 
		codeInfo.value = data.codeInfo;
		// if (data.valid) {
		// 	//在有效期内
		// 	userInfo.value.vipStatus = '有效期至' + data.validUntil
		// } else {
		// 	userInfo.value.vipStatus = '暂无可用时间'
		// }
	}
	
	const onCopyClick = () => {
		uni.setClipboardData({
			data: userInfo.value.invitationCode,
			success() {
				uni.showToast({
					title: '复制成功'
				})
			},
			fail() {
				uni.showToast({
					title: '复制失败'
				})
			}
		})
	}
	
	const getDynamicConfigFn = async () => {
		const { data } = await getDynamicConfig({});
		configText.value = data.text;
	}
	
	onShow(() => {
		getDynamicConfigFn();
		const cacheUserInfo = uni.getStorageSync("userInfo");
		if (cacheUserInfo) {
			isLogin.value = true;
			userInfo.value = JSON.parse(cacheUserInfo);
			getUserInfoFn();
		} else {
			isLogin.value = false;
			userInfo.value = {};
		}
	});
	
	// 分享好友
	onShareAppMessage(() => {
		console.log('分享好友');
		return {
			title: '鲸采文案',
			path: '/pages/index/index',
			success() {
				console.log('分享成功')
			}
		}
	});
	// 分享朋友圈
	onShareTimeline(() => {
		console.log('分享朋友圈');
		return {
			title: '鲸采文案',
			path: '/pages/index/index',
			success() {
				console.log('分享成功')
			}
		}
	});

	const exchangeFn = async () => {
		if (!isLogin.value) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000,
			})
		} else {
			const { success, data } = await codeRedeem({
				code: vipCode.value,
				userId: userInfo.value.id
			}); 
			if (success) {
				if (data.success) {
					uni.showToast({
						title: '兑换成功',
						icon: 'none',
						duration: 2000,
					})
					vipCode.value = '';
					getUserInfoFn();
				}else {
					uni.showToast({
						title: '兑换失败，请联系客服',
						icon: 'none',
						duration: 3000,
					})
				}
			} else {
				uni.showToast({
					title: '兑换失败，请联系客服',
					icon: 'none',
					duration: 3000,
				})
			}
		}
	}
	const goHistoryFn = () => {
		if (!isLogin.value) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000,
			})
		} else {
			uni.switchTab({
			  url: '/pages/extract_record/extract_record',
			})
		}
	}
	const goSettingFn = () => {
		if (!isLogin.value) {
			uni.showToast({
				title: '请先登录',
				icon: 'none',
				duration: 2000,
			})
		} else {
			uni.navigateTo({
			  url: '/pages/settings/account_settings',
			})
		}
	}
	
	const goSetting = () => {
		uni.navigateTo({
		  url: '/pages/settings/account_settings',
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #0051FE 0%, rgba(0, 81, 254, 0) 100%);
		display: flex;
		flex-direction: column;
		overflow: auto;

		.layout {
			padding: 54rpx 48rpx;
			// display: flex;
			// flex-direction: column;
			height: 100vh;
			overflow: auto;
			
			.service-layout {
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				align-items: center;
				justify-content: center;
				.service-title {
					font-size: 26rpx;
					font-weight: bold;
					color: #333;
					letter-spacing: 1rpx;
				}
				.service-icon {
					width: 260rpx;
					height: 260rpx;
				}
			}

			.header {
				height: 144rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: white;

				.left {
					display: flex;
					flex-direction: column;

					.username {
						font-size: 48rpx;
						line-height: 48rpx;
						font-weight: 800;
						margin-bottom: 30rpx;
					}

					.invitation {
						font-size: 24rpx;
						font-weight: 400;
						.icon {
							width: 24rpx;
							height: 24rpx;
							margin-left: 15rpx;
						}
					}
				}

				.right {
					.avatar {
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
					}
				}
			}

			.menu-layout {
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				background-color: white;
				border-radius: 8rpx;
				overflow: hidden;

				.item {
					height: 96rpx;
					color: #333;
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						gap: 20rpx;

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}

					&-header {
						background-color: #0051FE;
						color: white;

						.right {
							color: #E9B46C;
						}
					}
				}
				.title {
					font-size: 28rpx;
					// font-weight: bold;
					color: #333;
				}
				.file {
					margin-top: 20rpx;
					height: 70rpx;
					border: 1rpx solid #E4E7EC;
					border-radius: 8rpx;
					padding: 0 24rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					.input-box {
						width: 100%;
					}
				}
				.btn-group {
					margin-top: 20rpx;
					display: flex;
					gap: 24rpx;
					align-items: center;
					justify-content: center;
					.btn {
						width: 200rpx;
						height: 60rpx;
						color: white;
						font-size: 24rpx;
						font-weight: 400;
						background-color: #AAB2C3;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.active {
						background: #0051FE;
					}
					.reset {
						background: #F3F8FF;
						color: #0051FE;
					}
				}

			}
		}
	    .bottomPopup {
			height: 50vh;
			background: #fff;
			width: 100vw;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
	.mt25 {
		margin-top: 25rpx;
	}
	.ml14 {
		margin-left: 14rpx;
	}
</style>